<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElRow, ElCol } from 'element-plus'
import { Echart } from '@/components/Echart'
import { lineOptions, lineOptions1, lineOptions2 } from './component/echarts-data'
import { getListApi } from '@/api/dashboard'
onMounted(() => {
  getListApidata()
})
const options = ref<Array<{}>>([])
const getListApidata = async () => {
  const res = await getListApi()
  options.value = res.data
}
const formatNumber = (value) => {
  if (value >= 100000000) {
    return (value / 100000000).toFixed(2) + ' 亿'
  } else if (value >= 10000) {
    return (value / 10000).toFixed(2) + ' 万'
  } else {
    return value.toString()
  }
}
</script>
<template>
  <div class="body">
    <ElRow :gutter="20" justify="space-between">
      <!-- 运营数据 -->
      <ElCol :span="8" v-if="options.run">
        <ElCol :span="8">
          <div class="mb-20px text-[20px] font-500">运营数据</div>
        </ElCol>
        <div class="w-568px h-238px bg-white rounded-8px flex">
          <div class="p-20px box-border flex-1">
            <div class="text-[18px] font-400">本月入库金额</div>
            <div class="mt-20px">
              <span class="text-[26px] font-500 text-[rgba(46,116,255,1)]">{{
                formatNumber(options.run.m_in_amount)
              }}</span>
              <span class="text-[14px] font-400 text-[rgba(102,105,110,1)] ml-10px mr-5px"
                >较上月</span
              >
              <span><img src="@/assets/home/home1.png" class="w-10px h-8px" /></span>
              <span class="text-[14px] font-400 text-[rgba(102,105,110,1)] ml-5px">0.9%</span>
            </div>
            <div class="mt-20px w-211px">
              <Echart :options="lineOptions" :height="100" />
            </div>
          </div>
          <div class="p-20px box-border flex-1">
            <div class="text-[18px] font-400">本月出库金额</div>
            <div class="mt-20px">
              <span class="text-[26px] font-500 text-[rgba(255,32,32,1)]">{{
                options.run.m_out_amount
              }}</span>
              <span class="text-[14px] font-400 text-[rgba(102,105,110,1)] ml-10px mr-5px"
                >较上月</span
              >
              <span><img src="@/assets/home/home2.png" class="w-10px h-8px" /></span>
              <span class="text-[14px] font-400 text-[rgba(102,105,110,1)] ml-5px">0.9%</span>
            </div>
            <div class="mt-20px w-211px">
              <Echart :options="lineOptions1" :height="100" />
            </div>
          </div>
        </div>
        <div class="w-568px h-238px bg-white rounded-8px mt-20px text-center relative">
          <img src="@/assets/home/home3.png" class="w-178px h-180px mt-30px" />
          <div class="text-[14px] font-400 absolute top-90px left-245px">库存金额(元)</div>
          <div
            class="text-[20px] font-500 text-[rgba(255,32,32,1)] absolute top-120px left-245px"
            >{{ formatNumber(options.run.stock_amount) }}</div
          >
        </div>
      </ElCol>
      <!-- 运营数据 -->
      <ElCol :span="8" v-if="options.run">
        <ElCol :span="8">
          <div class="mb-20px text-[20px] font-500 h-26px"></div>
        </ElCol>
        <div class="w-576px h-496px bg-white rounded-8px p-30px box-border">
          <div
            class="p-20px box-border w-252px h-125px bg-[rgba(67,46,255,1)] rounded-4px inline-block"
          >
            <div>
              <span class="text-[14px] font-400 text-white mr-15px">总入库订单</span>
              <span class="text-[26px] font-500 text-white">{{
                formatNumber(options.run.in_count)
              }}</span>
            </div>
            <div class="mt-15px">
              <span class="text-[14px] font-400 text-white mr-15px">总入库金额</span>
              <span class="text-[26px] font-500 text-white">{{
                formatNumber(options.run.in_amount)
              }}</span>
            </div>
          </div>
          <div
            class="p-20px box-border w-252px h-125px bg-[rgba(46,116,255,1)] rounded-4px inline-block ml-10px"
          >
            <div>
              <span class="text-[14px] font-400 text-white mr-15px">总出库订单</span>
              <span class="text-[26px] font-500 text-white">{{ options.run.out_count }}</span>
            </div>
            <div class="mt-15px">
              <span class="text-[14px] font-400 text-white mr-15px">总出库金额</span>
              <span class="text-[26px] font-500 text-white">{{ options.run.out_amount }}</span>
            </div>
          </div>
          <div class="mt-20px w-528px">
            <Echart :options="lineOptions2" :height="309" />
          </div>
        </div>
      </ElCol>
      <!-- 基础数据 -->
      <ElCol :span="8" v-if="options.base">
        <ElCol :span="8">
          <div class="mb-20px text-[20px] font-500">基础信息</div>
        </ElCol>
        <div>
          <div
            class="p-20px box-border w-282px h-110px bg-white rounded-8px inline-block mr-15px hover:bg-[rgba(46,116,255,1)] hover:text-white"
          >
            <div class="text-[14px] font-400">商品SKU</div>
            <div class="text-[26px] font-500 mt-15px">{{ options.base.goods_rules }}</div>
          </div>
          <div
            class="p-20px box-border w-282px h-110px bg-white rounded-8px inline-block hover:bg-[rgba(46,116,255,1)] hover:text-white"
          >
            <div class="text-[14px] font-400">商品库存数量</div>
            <div class="text-[26px] font-500 mt-15px">{{
              formatNumber(options.base.goods_stock)
            }}</div>
          </div>
          <div
            class="p-20px box-border w-282px h-110px bg-white rounded-8px inline-block mr-15px mt-18px hover:bg-[rgba(46,116,255,1)] hover:text-white"
          >
            <div class="text-[14px] font-400">仓库数量</div>
            <div class="text-[26px] font-500 mt-15px">{{ options.base.wh_count }}</div>
          </div>
          <div
            class="p-20px box-border w-282px h-110px bg-white rounded-8px inline-block mt-18px hover:bg-[rgba(46,116,255,1)] hover:text-white"
          >
            <div class="text-[14px] font-400">库区数量</div>
            <div class="text-[26px] font-500 mt-15px">{{ options.base.wh_area_count }}</div>
          </div>
          <div
            class="p-20px box-border w-282px h-110px bg-white rounded-8px inline-block mr-15px mt-18px hover:bg-[rgba(46,116,255,1)] hover:text-white"
          >
            <div class="text-[14px] font-400">库位数量</div>
            <div class="text-[26px] font-500 mt-15px">{{ options.base.wh_storage_count }}</div>
          </div>
          <div
            class="p-20px box-border w-282px h-110px bg-white rounded-8px inline-block mt-18px hover:bg-[rgba(46,116,255,1)] hover:text-white"
          >
            <div class="text-[14px] font-400">门店数量</div>
            <div class="text-[26px] font-500 mt-15px">{{ options.base.store_count }}</div>
          </div>
          <div
            class="p-20px box-border w-282px h-110px bg-white rounded-8px inline-block mr-15px mt-20px hover:bg-[rgba(46,116,255,1)] hover:text-white"
          >
            <div class="text-[14px] font-400">车辆数量</div>
            <div class="text-[26px] font-500 mt-15px">{{ options.base.car_count }}</div>
          </div>
          <div
            class="p-20px box-border w-282px h-110px bg-white rounded-8px inline-block mt-20px hover:bg-[rgba(46,116,255,1)] hover:text-white"
          >
            <div class="text-[14px] font-400">路线数量</div>
            <div class="text-[26px] font-500 mt-15px">{{ options.base.line_count }}</div>
          </div>
        </div>
      </ElCol>
    </ElRow>
    <ElRow :gutter="20" justify="space-between">
      <!-- 商品数据 -->
      <ElCol :span="8" v-if="options.goods">
        <ElCol :span="8">
          <div class="mt-20px text-[20px] font-500">商品数据</div>
        </ElCol>
        <div
          class="mt-20px p-20px box-border w-572px h-105px bg-white rounded-8px flex items-center"
        >
          <div class="w-60px h-60px bg-[rgba(46,116,255,0.1)] rounded-50% text-center inline-block"
            ><img src="@/assets/home/home4.png" class="w-29px h-33px mt-13px"
          /></div>
          <div class="ml-15px inline-block">
            <div class="text-[26px] font-500 mb-10px">{{ options.goods.count }}</div>
            <div class="text-[14px] font-400 text-[rgba(102,105,110,1)]">商品订单数量</div>
          </div>
        </div>
        <div
          class="mt-20px p-20px box-border w-572px h-105px bg-white rounded-8px flex items-center"
        >
          <div class="w-60px h-60px bg-[rgba(46,116,255,0.1)] rounded-50% text-center inline-block"
            ><img src="@/assets/home/home5.png" class="w-29px h-33px mt-13px"
          /></div>
          <div class="ml-15px inline-block">
            <div class="text-[26px] font-500 mb-10px">{{ options.goods.xs_amount }}</div>
            <div class="text-[14px] font-400 text-[rgba(102,105,110,1)]">商品订单金额</div>
          </div>
        </div>
        <div
          class="mt-20px p-20px box-border w-572px h-105px bg-white rounded-8px flex items-center"
        >
          <div class="w-60px h-60px bg-[rgba(46,116,255,0.1)] rounded-50% text-center inline-block"
            ><img src="@/assets/home/home6.png" class="w-29px h-33px mt-13px"
          /></div>
          <div class="ml-15px inline-block">
            <div class="text-[26px] font-500 mb-10px">{{ options.goods.xs_count }}</div>
            <div class="text-[14px] font-400 text-[rgba(102,105,110,1)]">库存商品SKU数量</div>
          </div>
        </div>
      </ElCol>
      <!-- 单据数据 -->
      <ElCol :span="8" v-if="options.order">
        <ElCol :span="8">
          <div class="mt-20px text-[20px] font-500 h-26px">单据数据</div>
        </ElCol>
        <div class="w-576px h-354px bg-[rgba(67,46,255,1)] rounded-8px p-25px box-border mt-20px">
          <div class="p-20px box-border w-528px h-95px bg-white rounded-4px flex items-center">
            <div class="w-60px h-60px bg-[rgba(46,116,255,1)] rounded-50% text-center inline-block"
              ><img src="@/assets/home/home7.png" class="w-30px h-27px mt-18px"
            /></div>
            <div class="ml-15px inline-block">
              <div class="text-[14px] font-400 text-[rgba(102,105,110,1)] mb-10px">分拣单总数</div>
              <div class="text-[26px] font-500">6,987</div>
            </div>
          </div>
          <div class="p-20px box-border w-254px h-191px bg-white rounded-4px inline-block mt-20px">
            <div class="flex items-center">
              <div
                class="w-50px h-50px bg-[rgba(255,178,36,1)] rounded-50% text-center inline-block"
                ><img src="@/assets/home/home8.png" class="w-27px h-25px mt-13px"
              /></div>
              <div class="ml-15px inline-block"> 采购单 </div>
            </div>
            <div class="w-218px h-1px bg-[rgba(0,0,0,0.1)] mt-10px"></div>
            <div class="mt-15px">
              <span class="text-[16px] font-400 mr-15px">已完成:</span>
              <span class="text-[22px] font-500">{{ options.order.cg_count }}</span>
            </div>
            <div class="mt-15px">
              <span class="text-[14px] font-400 mr-15px">未完成:</span>
              <span class="text-[22px] font-500">{{ options.order.cg_un_count }}</span>
            </div>
          </div>
          <div
            class="p-20px box-border w-254px h-191px bg-white rounded-4px inline-block mt-20px ml-17px"
          >
            <div class="flex items-center">
              <div class="w-50px h-50px bg-[rgba(67,46,255,1)] rounded-50% text-center inline-block"
                ><img src="@/assets/home/home9.png" class="w-27px h-25px mt-13px"
              /></div>
              <div class="ml-15px inline-block"> 销售单 </div>
            </div>
            <div class="w-218px h-1px bg-[rgba(0,0,0,0.1)] mt-10px"></div>
            <div class="mt-15px">
              <span class="text-[16px] font-400 mr-15px">已完成:</span>
              <span class="text-[22px] font-500">{{ options.order.xs_count }}</span>
            </div>
            <div class="mt-15px">
              <span class="text-[14px] font-400 mr-15px">未完成:</span>
              <span class="text-[22px] font-500">{{ options.order.xs_un_count }}</span>
            </div>
          </div>
        </div>
      </ElCol>
      <!-- 预警信息 -->
      <ElCol :span="8">
        <ElCol :span="8">
          <div class="mt-20px text-[20px] font-500 h-26px">预警信息</div>
        </ElCol>
        <div class="w-584px h-200px bg-white rounded-8px flex mt-20px">
          <div class="flex-1">
            <div class="relative">
              <div class="text-center inline-block absolute top-26px left-65px"
                ><img src="@/assets/home/home10.png" class="w-148px h-148px"
              /></div>
              <div class="text-[18px] font-400 absolute top-70px left-100px"> 过期商品 </div>
              <div
                class="text-[22px] font-500 absolute top-100px left-110px text-[rgba(255,32,32,1)]"
              >
                6,987
              </div>
            </div>
          </div>
          <div class="w-1px h-160px bg-[rgba(0,0,0,0.1)] mt-20px"></div>
          <div class="flex-1">
            <div class="relative">
              <div class="text-center inline-block absolute top-26px left-65px"
                ><img src="@/assets/home/home10.png" class="w-148px h-148px"
              /></div>
              <div class="text-[18px] font-400 absolute top-70px left-100px"> 临期商品 </div>
              <div
                class="text-[22px] font-500 absolute top-100px left-110px text-[rgba(255,32,32,1)]"
              >
                6,987
              </div>
            </div>
          </div>
        </div>
        <div class="w-584px h-134px bg-white rounded-8px flex mt-20px p-20px box-border">
          <div class="flex-1">
            <div
              class="w-60px h-60px bg-[rgba(46,116,255,0.1)] rounded-50% text-center inline-block ml-30px mt-20px"
              ><img src="@/assets/home/home11.png" class="w-34px h-33px mt-12px"
            /></div>
            <div class="ml-15px inline-block">
              <div class="text-[14px] font-400 text-[rgba(102,105,110,1)] mb-10px"
                >任务异常上报</div
              >
              <div class="text-[26px] font-500">6,987</div>
            </div>
          </div>
          <div class="w-1px h-94px bg-[rgba(0,0,0,0.1)]"></div>
          <div class="flex-1">
            <div
              class="w-60px h-60px bg-[rgba(46,116,255,0.1)] rounded-50% text-center inline-block ml-30px mt-20px"
              ><img src="@/assets/home/home12.png" class="w-32px h-37px mt-12px"
            /></div>
            <div class="ml-15px inline-block">
              <div class="text-[14px] font-400 text-[rgba(102,105,110,1)] mb-10px">异常反馈</div>
              <div class="text-[26px] font-500">6,987</div>
            </div>
          </div>
        </div>
      </ElCol>
    </ElRow>
  </div>
</template>
<style scoped>
.body {
  min-width: 1800px;
}
</style>
